<template>
  <!-- table区域-begin -->
  <div>
    <a-table
      ref="table"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="quantifyDataSource"
      :pagination="false"
      :expandedRowKeys="expandedRowKeys"
      @change="handleTableChange"
      @expand="handleExpand"
    >
      <template #expandedRowRender="{ record }">
        <j-vxe-table
          toolbar
          row-number
          highlight-current-row
          :radio-config="{highlight: false}"
          :checkbox-config="{highlight: false}"
          :toolbarConfig="toolbarConfig"
          :columns="innerColumns"
          @edit-closed="handleEditClosed"
          :dataSource="innerData"
        />
      </template>
    </a-table>
  </div>
  <!-- table区域-end -->
</template>

<script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { JVXETypes } from '@comp/jeecg/JVxeTable'

export default {
  name: 'QuantitativeTable',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      // 子表表头
      innerColumns: [
        { key: 'sampleNum', title: '样本编号', width: '10%' },
        { key: 'value', title: '检验值', width: '40%', type: JVXETypes.input }
      ],
      toolbarConfig: {
        // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
        btn: []
      },
      quantifyDataSource: [],
      innerData: [],
      expandedRowKeys: [],
      id: ' ',
      description: '列表展开子表Demo',
      // 列表表头
      columns: [{
        title: '#',
        dataIndex: '',
        key: 'rowIndex',
        width: 60,
        align: 'center',
        customRender: function(t, r, index) {
          return parseInt(index) + 1
        }
      },
        {
          title: '检验组',
          align: 'center',
          dataIndex: 'checkGroup'
        },
        {
          title: '检验描述',
          align: 'center',
          dataIndex: 'checkName'
        },
        // {
        //   title: '检验方法',
        //   align: "center",
        //   dataIndex: 'checkMethod'
        // },
        {
          title: '抽样数',
          align: 'center',
          dataIndex: 'samplingNum'
        }
      ],
      // 分页参数
      type: 'radio',
      url: {
        list: '/test/order/orderList',
        delete: '/test/order/delete',
        deleteBatch: '/test/order/deleteBatch',
        getQuantitativeDetail: '/qis/qisMatheadValue/getQuantitativeDetail',
        saveRow: '/qis/qisMatheadValue/editQisMatdetailValue'
      }
    }
  },
  computed: {
    currentId() {
      return this.id
    }
  },
  methods: {
    handleEditClosed(event) {
      console.log('触发改动')
      let { $table, row, column } = event
      getAction(this.url.saveRow, row).then(res => {
        if (res.success) {
          this.$message.success(`保存成功！`)
          // 局部更新单元格为已保存状态
          $table.reloadRow(row, null, field)
        } else {
          this.$message.warn(`保存失败：` + res.message)
        }
      }).finally(() => {
      })
    },
    open(record) {
      this.quantifyDataSource = record
    },
    handleExpand(expanded, record) {
      this.expandedRowKeys = []
      this.innerData = []
      if (expanded === true) {
        this.loading = true
        this.expandedRowKeys.push(record.id)
        getAction(this.url.getQuantitativeDetail, { id: record.id, checkNo: record.checkNo }).then((res) => {
          if (res.success) {
            this.loading = false
            this.innerData = res.result
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}
</style>